<!--  -->
<template>
  <div class>
  <img src="../../assets/img/banner.png" alt class="bannger" />
    <titlemeta></titlemeta>
    <div class="contentP_nav">
      <!-- <div class="contentP_nav_pro" v-if="!mobilePc">
      
        <div
          class="contentP_nav_pro_com"
          v-for="(item,index) in projectList"
          :key="index"
          @click="goConInfo(item)"
          :class="{'click':item.id == id}"
        >{{item.serviceName}}</div>
      </div> -->


      <div class="navContent">
        <!-- <div class="navContent_title">
                <div class="navContent_title_left">
                    <img :src="infoData.serviceUrl" alt="">
                </div>

                <div class="navContent_title_right">
                     <div class="navContent_title_right_name">{{infoData.serviceName}}</div>
                     <div class="navContent_title_right_cont">{{infoData.serviceDescribe}}</div>
                </div>
        </div>

        <div class="serve_info">
            服务详情
        </div> -->
        <!-- <div class="navContent_env">
          <VueEditor
            style="width: 100%"
            v-model="data"
            :editorToolbar="customToolbar"
            :disabled="true"
          ></VueEditor>
        </div> -->
          <div class="navContent_env">

          <div v-html="data">

          </div>
        </div>
        <!-- <div class="nextPud">
          <div v-if="previousdis" @click="getpreviousdis">
            <Icon type="md-arrow-round-back" />
            上一篇 {{previous.contentName}}
          </div>
          <div v-if="articledis" @click="getarticledis" class="articledisRignt">
            {{article.contentName}} 下一篇
            <Icon type="md-arrow-round-forward" />
          </div>
        </div> -->
      </div>

      <!-- <div class="contentP_nav_pro" v-if="mobilePc">
        <div class="contentP_nav_pro_title">公司常见问题</div>
        <div
          class="contentP_nav_pro_com"
          v-for="(item,index) in problemData"
          :key="index"
          @click="goproblemInfo(item)"
        >{{item.problemInfoName}}</div>
      </div> -->
    </div>
    <!-- <div class="navContent">
      <div class="navContent_env">
        <VueEditor
          style="width: 100%"
          v-model="data"
          :editorToolbar="customToolbar"
          :disabled="true"
        ></VueEditor>
      </div>
      <div class="nextPud">
        <div v-if="previousdis" @click="getpreviousdis" >
          <Icon type="md-arrow-round-back" />
          上一篇 {{previous.contentName}}
        </div>
        <div v-if="articledis" @click="getarticledis" class="articledisRignt">
          {{article.contentName}} 下一篇
          <Icon type="md-arrow-round-forward" />
        </div>
      </div>
    </div>-->

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Head from "../../components/Head";
import Foot from "../../components/Foot";
import lefINvitation from "../../components/lefINvitation";
import nightNvitation from "../../components/nightNvitation";
import {clieentWidth} from '../../utils/clientwidth'
import {
  serviceContent,
  findPrevAndNextService,
  problemInfoAll,
  twosearchService
} from "../../api/info";
import { VueEditor } from "vue2-editor";
import titlemeta from "../../components/titlemeta";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Head,
    Foot,
    lefINvitation,
    nightNvitation,
    VueEditor,
    titlemeta
  },
  data() {
    //这里存放数据
    return {
      projectList:[],
        title: {
          key:'',
          type:'',
      },
      infoData:{},
       mobilePc:false,
      problemData: [],
      previous: "", //上一篇
      previousdis: false,
      articledis: false,
      article: "", //下
      id: "",
      data: "",
      customToolbar: [
        [{ font: [] }],
        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        [{ size: ["small", false, "large", "huge"] }],
        ["bold", "italic", "underline", "strike"],
        [
          { align: "" },
          { align: "center" },
          { align: "right" },
          { align: "justify" }
        ],
        [{ header: 1 }, { header: 2 }],
        ["blockquote", "code-block"],
        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
        [{ script: "sub" }, { script: "super" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ color: [] }, { background: [] }],
        ["link", "image", "video", "formula"],
        [{ direction: "rtl" }],
        ["clean"]
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route(to, from) {
      this.$router.go(0);
    }
  },
  //方法集合
  methods: {
    getfindPrevAndNextService() {
      findPrevAndNextService(this.id).then(res => {
       
        if (res.code == "0000") {
          if (res.data.prev != null) {
            this.previous = res.data.prev;
            this.previousdis = true;
          } else {
            this.previousdis = false;
          }
          if (res.data.next != null) {
            this.article = res.data.next;
            this.articledis = true;
          } else {
            this.articledis = false;
          }
        }
      });
    },
    // 上一篇
    getpreviousdis() {
      this.$router.push({
        path: "/contentInfo",
        query: { id: this.previous.id }
      });
    },
    // 下一篇
    getarticledis() {
      this.$router.push({
        path: "/contentInfo",
        query: { id: this.article.id }
      });
    },
    getproblemInfo() {
      serviceContent(this.id).then(res => {
         this.infoData = res.data
         this.data = res.data.content.replace(/\<img/gi, '<img style="width:100% !important;height:auto;display:block"')
        //  this.data = this.data.content.replace(/\<img/gi, '<img style="max-width:100% !important;height:auto"')
      });
    },
    // 所有的问题
    problemInfoAlls() {
      problemInfoAll().then(res => {
        let data = res.data;
      
        if (data.lenght < 5) {
          this.problemData = data;
        } else {
          this.problemData = data.slice(0, 5);
        }
      });
    },
    // 跳转详情
    goproblemInfo(item) {
      this.$router.push({ path: "/problem", query: { id: item.id } });
    },
               ismobilePc(){
      if(clieentWidth()){
        this.mobilePc = true
      }else{
        this.mobilePc = false
      }
    },
    // 上级服务菜单
    getsearchService(){
        twosearchService(this.title).then(res => {
        if (res.code == "0000") {
          this.projectList = res.data;
        } 
        
      });
    },
    goConInfo(item){
         this.id = item.id
         this.getproblemInfo()
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.id = this.$route.query.id;
    this.title.type = this.$route.query.parentId;
    this.getproblemInfo();
    this.getsearchService()
    // this.getfindPrevAndNextService();
    // this.problemInfoAlls();
    //  this.ismobilePc()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
@import url("../../assets/nvit.scss");
.bannger {
  width: 100%;
}
//@import url(); 引入公共css类
.navContent {
  width: 100%;
  // border: 1px solid rgba(54, 54, 54, 0.137);
  // padding: 20px 0;
  // margin: 40px 0;
  //   text-align: center;
}
.navContent_env {
  //   font-size: 30px;
  //   color: #333;
  width: 100%;
  text-align: center;
  // border-top:1px solid rgba(0, 0, 0, 0.322) ;
}

/deep/.quillWrapper .ql-snow.ql-toolbar {
  display: none;
}
/deep/.ql-container.ql-snow {
  border: 0;
  /* border-top:1px solid #ccc; */
}
.nextPud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.16rem;
}
.nextPud > div {
  width: 40%;
  padding: 0.1rem 0.1rem;
  cursor: pointer;
}
.articledisRignt {
  text-align: right;
}
.contentP_nav {
  display: flex;
  width: 100%;
  margin: auto;
  // background-color: rgba(54, 54, 54, 0.137);
  // justify-content: space-around;
}
.contentP_nav_pro {
  width: 20%;
  margin-right: 0.3rem;
}
.contentP_nav_pro_com {
  padding: 0.1rem;
  // padding-bottom: 0.1rem;
  border: 1px solid rgba(54, 54, 54, 0.137);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  // padding-left: 0.15rem;
  font-size: 0.16rem;
}
.contentP_nav_pro_com:hover {
  color: white;
  background-color: rgba(7, 103, 242, 1);
}
.contentP_nav_pro_title {
  font-size: 0.16rem;
  padding-left: 0.05rem;
  border-left: 0.1rem solid rgba(31, 121, 196, 0.753);
  margin-bottom: 0.1rem;
}
.navContent_title{
  display: flex;
}
.navContent_title_left>img{
  width: 4rem;
  height: 1.9rem;
  margin-right: 0.5rem;
}
.navContent_title_right_name,.navContent_title_right_cont{
      font-family: '微软雅黑';
      height: 0.5rem;
    font-weight: 400;
    font-style: normal;
    font-size: 0.2rem;
}
.navContent_title_right_cont{
  color: rgba(0, 0, 0, 0.377);
  font-size: 0.14rem;
}
.serve_info{
  padding: 0.2rem 0;
  font-size: 0.24rem;
  font-weight: 600;
}
.click{
    background-color: rgba(7, 105, 242, 0.563);
    cursor: pointer;
    color: white;
}
@media screen and (max-width: 740px) {
  .contentP_nav {
    width: 90%;
  }
  .nextPud {
  display: block;

  font-size: 1rem;
}
.nextPud > div{
  width: 100%;
}
.contentP_nav {
  width: 90%;
  display: block;
}
.navContent{
  margin: auto;
}
.contentP_nav_pro{
  width: 80%;
  margin: 0.34rem auto;
  font-size: 0.14rem;

}
.contentP_nav_pro_title{
  font-size: 1rem;
}
.contentP_nav_pro_com{
  font-size: 0.14rem;
}
.navContent_title{
  display: block;
}
.navContent_title_left>img{
  width: 100%;
  height: 1.3rem;
  margin-right: 0;
}
}
</style>